const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

const pathResolve = (_) => path.resolve(__dirname, '..', _);

const baseConfig = {
  entry: {
    index: pathResolve('src/index.js'),
  },
  output: {
    path: pathResolve('dist'),
    publicPath: '/',
    clean: true,
    filename: 'js/[name].bundle.js',
    assetModuleFilename: 'assets/[hash][ext][query]',
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                modifyVars: {
                  '@primary-color': '#c3473a',
                  '@font-size-base': '16px',
                  '@border-radius-base': '5px',
                  '@box-shadow-base': '0 2px 8px rgb(0 0 0 / 15%)',
                  '@text-color': '#666',
                },
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
      {
        test: /\.(js|jsx)$/i,
        use: 'babel-loader',
        exclude: /(node_modules|bower_components)/,
      },
      {
        test: /\.(png|jfif|jpg|svg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  optimization: {
    // 配置 optimization.moduleIds，让公共包 splitChunks 的 hash 不因为新的依赖而改变，减少非必要的 hash 变动
    moduleIds: 'deterministic',
    runtimeChunk: {
      name: 'runtimeChunk',
    },
    splitChunks: {
      chunks: 'async', // 可以选择对哪些chunk进行优化（all|async|initial）
      minSize: 30000, // 要生成的chunk的最小大小(b)
      maxSize: 1024 * 1024, // 把提取出来的模块打包生成的文件大小不能超过maxSize值，如果超过了，要对其进行分割并打包生成新的文件。单位为字节，默认为0，表示不限制大小。
      minChunks: 1, // 分割前必须共享模块的最小引用次数
      maxAsyncRequests: 6, // 按需加载 最大并行请求量
      maxInitialRequests: 4, // 初始化页面 最大并行请求量
      automaticNameDelimiter: '__', // chunk一般名称格式为（例如vendors~main.js）该项指分隔符
      cacheGroups: {
        // 缓存组可以继承和覆盖splitChunks.*全部属性
        vendors: {
          name: `wangyiMusicPlayer-vendors`,
          test: /[\\/]node_modules[\\/]/, // test属性只有在cache group中操作 正则匹配chunk放到该缓存组中
          chunks: 'initial',
          priority: -10, // 优先级
        },
        common: {
          name: `wangyiMusicPlayer-common`,
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true,
        },
      },
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: pathResolve('public/index.html'),
      scriptLoading: 'blocking',
    }),
    new ESLintPlugin(),
  ],
  resolve: {
    alias: {
      '@': pathResolve('src'),
    },
    extensions: ['.js', '.jsx'],
  },
};

module.exports = {
  baseConfig,
  pathResolve,
};
